<template>
  <el-container direction="vertical">
    <div class="topBar">
      <el-button-group>
        <el-button size="mini" plain @click="$router.go(-1)">
          <i class="el-icon-arrow-left"></i>
        </el-button>
        <el-button size="mini" plain @click="$router.go(1)">
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </el-button-group>
    </div>
    <el-container>
      <el-main>
        <DirList
          :file-type="fileType"
          :file-list="fileList"
          :remove-id="removeId"
        />
      </el-main>
    </el-container>
    <div class="bottomBar">
      <el-button size="mini" @click="createDir">新建文件夹</el-button>
      <div>
        <el-button size="mini" @click="cancelFn">取消</el-button>
        <el-button size="mini" type="primary" @click="sureFn">确定</el-button>
      </div>
    </div>
  </el-container>
</template>
<script>
import DirList from "./dirList";
import { createDir, getFileByDir } from "@/api/file";
import { ipcRenderer } from "@/global";

export default {
  name: "PathSelector",
  components: { DirList },
  data() {
    return {
      fileList: null
    };
  },
  computed: {
    dirTypeId() {
      let id;
      for (let key in this.fileType) {
        if (this.fileType[key].typeSuffix === "dir") {
          id = key;
        }
      }
      return parseInt(id);
    },
    dirId() {
      return this.$route.query.id;
    },
    fileType() {
      return JSON.parse(this.$route.params.fileType);
    },
    removeId() {
      return this.$route.params.removeId;
    }
  },
  watch: {
    $route() {
      getFileByDir(this.$route.query.id).then(res => {
        this.fileList = this.getDirs(res.data);
      });
    }
  },
  mounted() {
    getFileByDir().then(res => {
      this.fileList = this.getDirs(res.data);
    });
  },
  methods: {
    getDirs(arr) {
      let res = [];
      arr.forEach(d => {
        if (
          d["typeId"] === this.dirTypeId &&
          d.id !== parseInt(this.removeId)
        ) {
          console.log(d, this.removeId);
          res.push(d);
        }
      });
      return res;
    },
    sureFn() {
      ipcRenderer.send("PATH_SELECTOR_CLOSE", this.dirId);
    },
    cancelFn() {
      ipcRenderer.send("PATH_SELECTOR_CLOSE", "cancel");
    },
    createDir() {
      this.$prompt("请输入文件夹名称：", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          createDir({ name: value, parentId: this.dirId }).then(() => {
            this.$message.success("文件夹创建成功");
            getFileByDir(this.$route.query.id).then(res => {
              this.fileList = this.getDirs(res.data);
            });
          });
        })
        .catch(null);
    }
  }
};
</script>
<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-main {
  border-left: solid 2px gainsboro;
  border-right: solid 2px gainsboro;
  padding: 20px 0 20px 0;
  width: 100%;
  height: 100%;
}

.el-aside,
.el-container,
.el-main {
  overflow: hidden;
}

.topBar,
.bottomBar {
  background-color: #f8f8f8;
  padding: 5px;
}
.bottomBar {
  bottom: 0;
  display: flex;
  justify-content: space-between;
}
</style>
